<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
        普通函数：看调用方式
          - 直接调用：window，ES5严格模式下是undefined
          - 隐式（对象）调用：调用的对象
          - 显示（call/apply）调用：传入的第一个参数
          - new调用：产生实例对象
        特殊函数：
          - 箭头函数：外层函数的this，没有外层函数就是window
          - 回调函数：
            - 定时器回调函数：window，ES5严格模式下是undefined
            - 原生DOM事件回调函数：绑定事件的元素
            - Vue生命周期函数：组件实例对象
      */
      function fn() {
        console.log(this);
      }

      fn(); // window

      const obj = {
        fn,
      };
      obj.fn(); // obj

      fn.call({}); // {}

      new fn(); // 实例对象

      const fn1 = () => {
        const fn2 = () => {
          console.log(this); // window
        };
        fn2();
      };
      fn1.call({});
    </script>
  </body>
</html>
